<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"
	xmlns:composite="http://java.sun.com/jsf/composite">
<!-- Interface that defines the user contract of the component -->
<composite:interface>
	<composite:attribute name="regButtonText" required="true" />
	<composite:attribute name="regPrompt" default="Please fill registration details" />
	<composite:attribute name="emailPrompt" default="Email" />
	<composite:attribute name="userNamePrompt" default="Username" />
	<composite:attribute name="passwordPrompt" default="Password" />
	<composite:attribute name="confirmPasswordPrompt" default="Confirm Password" />
	<composite:attribute name="dobPrompt" default="Date of Birth in mm/dd/yy format" />
	<composite:attribute name="regAction" method-signature="java.lang.String register()" required="true" />
	<composite:attribute name="managedBean" required="true" />
</composite:interface>
<!-- Implementation that specifies the actual markup-->
<composite:implementation>
	<h:form id="form" prependId="false">
		<div class="prompt">#{cc.attrs.regPrompt}</div>
		<h:panelGrid columns="2">
			<h:outputText value="#{cc.attrs.emailPrompt}" />
			<h:inputText id="email" value="#{cc.attrs.managedBean.email}" required="true">
				<f:validateRegex pattern="[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[a-zA-Z0-9]+" />
			</h:inputText>
			<h:outputText value="#{cc.attrs.userNamePrompt}" />
			<h:inputText id="name" value="#{cc.attrs.managedBean.userName}" required="true" />
			<h:outputText value="#{cc.attrs.passwordPrompt}" />
			<h:inputSecret id="password" value="#{cc.attrs.managedBean.password}" required="true" />
			<h:outputText value="#{cc.attrs.confirmPasswordPrompt}" />
			<h:inputSecret id="confirmPassword" value="#{cc.attrs.managedBean.confirmPassword}" required="true" />
			<h:outputText value="#{cc.attrs.dobPrompt}" />
			<h:inputText id="dob" value="#{cc.attrs.managedBean.dob}" required="true">
				<f:convertDateTime dateStyle="short" />
			</h:inputText>
		</h:panelGrid>
		<p>
			<h:commandButton id="regButton" value="#{cc.attrs.regButtonText}" action="#{cc.attrs.regAction}"
				onclick="return checkPwd(this.form)">
				<f:ajax render="registerMessage" />	
			</h:commandButton>
		</p>
		<h2>
			<h:outputText id="registerMessage" value="#{cc.attrs.managedBean.registerMessage}" />
		</h2>
	</h:form>
	<script type="text/javascript">
    <!-- Javascript code to validate that values in password and confirmPasssword field are same -->
	function checkPwd(form) {
	    var pwd1 = document.getElementById("#{cc.clientId}" + ":" + "password");
	    var pwd2 = document.getElementById("#{cc.clientId}" + ":" + "confirmPassword");

	    if (pwd1.value != pwd2.value) {
	        alert("Passwords Do Not Match ");
	        pwd1.value = "";
	        pwd2.value = "";
	        return false;
	    } else {
	        form.submit();
	        return true;
	    }
        }
    </script>
	<div>
		<h3>Please note that all fields are mandatory</h3>
	</div>
	<div class="error" style="padding-top: 10px;">
		<h:messages layout="list" />
	</div>
</composite:implementation>
</html>